<template>
  <div class="IphoneLogin">
    <!-- 上面输入手机号模块 -->
    <div class="IphoneLogin-topBox">
      <h3>验证码登录/注册</h3>
    </div>
    <i-phone-number @SentButtonColor="GetButtonColor"></i-phone-number>
    <!-- 发送验证码按钮 -->
    <van-button class="sendButton" :color="LoginButtonColor" type="blue" block
      >发送验证码</van-button
    >
  </div>
</template>

<script>
export default {
  name: "IphoneLogin",
  data() {
    return {
      // 发送按钮颜色
      LoginButtonColor: "#dee2e6",
    };
  },
  mounted() {
    this.GetButtonColor();
  },
  methods: {
    GetButtonColor(data) {
      // console.log(data);
      this.LoginButtonColor = data?.ButtonColor;
    },
  },
};
</script>

<style lang="scss" >
.IphoneLogin {
  height: 93vh;
  padding: 0 0.625rem;
  .IphoneLogin-topBox {
    padding: 1.25rem 0.875rem;
    h3 {
      margin: 0.625rem 0;
    }
  }

  // 发送按钮
  .sendButton {
    margin-top: 1.25rem;
    border: none;
  }
}
</style>